<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      title="建议详情"
      width="80%"
      placement="right"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-descriptions v-if="feedbackTypeValue == 1" title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="用户名称">{{
            details.nickName
          }}</a-descriptions-item>
          <a-descriptions-item label="用户账号">{{
            details.username
          }}</a-descriptions-item>
          <a-descriptions-item label="提交时间">{{
            details.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="建议类型">{{
            details.type == 1 ? '功能异常': '产品建议'
          }}</a-descriptions-item>
          <a-descriptions-item label="反馈类型">{{
            details.questionType
          }}</a-descriptions-item>
          <a-descriptions-item label="联系方式">{{
            details.contactMobile
          }}</a-descriptions-item>
          <a-descriptions-item label="反馈内容" :span="4">{{
            details.content
          }}</a-descriptions-item>
          <a-descriptions-item v-if="details.photos" label="反馈图片" :span="4"
            >
            <template v-for="(item,index) in details.photos" :key="index">
              <a-image :src="item" width="100px"></a-image>
            </template>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions v-else title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="商家名称">{{
            details.nickName
          }}</a-descriptions-item>
          <a-descriptions-item label="商家账号">{{
            details.username
          }}</a-descriptions-item>
          <a-descriptions-item label="提交时间">{{
            details.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="建议类型">{{
            details.type == 1 ? '功能异常': '产品建议'
          }}</a-descriptions-item>
          <a-descriptions-item label="联系方式">{{
            details.contactMobile
          }}</a-descriptions-item>
          <a-descriptions-item label="反馈内容" :span="4">{{
            details.content
          }}</a-descriptions-item>
          <a-descriptions-item v-if="details.photos" label="反馈图片" :span="4"
            >
            <template v-for="(item,index) in details.photos" :key="index">
              <a-image :src="item" width="100px"></a-image>
            </template>
          </a-descriptions-item>
        </a-descriptions>
      </a-space>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { queryFeedbackDetail } from "@/api/suggest"
const modalOpen = ref(false);
const feedbackTypeValue = ref('');
const open = (id,feedbackType) => {
  feedbackTypeValue.value = feedbackType
  getQueryFeedbackDetail(id)
  modalOpen.value = true;
};
const details = ref({})
const  getQueryFeedbackDetail = async (id) => {
  const data = await queryFeedbackDetail({id})
  details.value = data.data
}
defineExpose({ open, modalOpen });
</script>

<style lang="less">
.table-item-layout {
  display: flex;
  align-items: center;
  padding: 24px 0;
  box-sizing: border-box;
  .table-item:last-child {
    border-right: 0px solid #ffffff;
  }
  .table-item {
    width: 20%;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 38px;
    box-sizing: border-box;
    border-right: 1px solid #e8ecf0;
    color: #2b3453;
    font-size: 14px;
    .table-flex {
      display: flex;
      align-items: center;
    }
  }
}

.title-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 16px;
    color: #000000;
    font-weight: 600;
  }
}

.steps-item {
  display: flex;
  align-items: flex-start;
  .left {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    .round {
      width: 20px;
      height: 20px;
      background: #262e47;
      border-radius: 50%;
    }

    .line {
      width: 2px;
      height: 53px;
      background: #262e47;
    }
  }

  .steps-title {
    color: #2b3453;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .steps-content {
    display: flex;
    align-items: center;
    color: #2b3453;
    font-size: 12px;
    .steps-block {
      margin-right: 55px;

      text {
        color: #1990ff;
        cursor: pointer;
      }
    }
  }
}
</style>
